<template>
  <div class="box">
    <!-- 名画详情页 -->
    <!-- 将图片信息循环渲染到页面 -->
      <div v-for="item in pictureInfo"
      :key="item.id"
      >
        <div>
          <van-row justify="space-between">
            <van-col span="12">{{item.name}}</van-col>
            <van-col span="12">{{item.author}}</van-col>
          </van-row>
          <hr>
          <van-row justify="space-between">
            <van-col span="8"> <img :src="item.picture" alt="" class="img"></van-col>
            <van-col span="4">
              <div v-if="isshow"><button @click="Collect()">收藏</button></div>
              <div v-else><button @click="UnCollect()">已收藏</button></div>
            </van-col>
          </van-row>
          <hr>
          <van-row>
            <van-col span="24">{{item.info}}</van-col>
          </van-row>
          <div class="bottom">
            <br>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['id'],
  computed: {
    ...mapState(['userInfo']),
    ...mapState(['tokenInfo'])
  },
  data () {
    return {
      pictureInfo: [],
      view: 0,
      collectList: [],
      isshow: true
    }
  },
  methods: {
    // 通过id获取图片信息
    async getPictureInfoById (id) {
      const { data: res } = await this.$http({
        url: 'picture/pictureInfoById',
        method: 'GET',
        params: {
          id
        }
      })
      // console.log(res.data)
      this.pictureInfo = res.data
      this.view = res.data[0].view + 1
      this.addView(id, this.view)
      // console.log(this.pictureInfo[0].name)
    },
    // 每次进入当前页面,浏览次数加一
    addView (id, view) {
      this.$http({
        url: 'picture/pictureView',
        method: 'POST',
        params: {
          id,
          view
        }
      })
    },
    async getCollectList () {
      const { data: res } = await this.$http({
        url: 'picture/getCollectList',
        methods: 'GET',
        params: {
          uid: this.userInfo.id
        }
      })
      this.collectList = res.data
      for (let i = 0; i < this.collectList.length; i++) {
        // console.log(this.collectList[i].pid)
        // console.log(this.$route.params.id)
        // eslint-disable-next-line eqeqeq
        if (this.collectList[i].pid == this.$route.params.id) {
          this.isshow = false
        }
      }
      // console.log(this.isshow)
    },
    // 通过id获取图片信息
    async Collect () {
      if (this.tokenInfo === '') {
        this.$toast('请登录！')
      } else {
        // console.log('aaa')
        await this.$http({
          url: 'picture/pictureCollect',
          method: 'GET',
          params: {
            id: this.$route.params.id,
            uid: this.userInfo.id,
            name: this.pictureInfo[0].name,
            author: this.pictureInfo[0].author,
            is_collect: 1
          }
        })
        this.getCollectList()
      }
    },
    // 通过id获取图片信息
    async UnCollect () {
      // console.log('aaa')
      await this.$http({
        url: 'picture/pictureUnCollect',
        method: 'GET',
        params: {
          id: this.$route.params.id,
          uid: this.userInfo.id
        }
      })
      this.isshow = true
      this.getCollectList()
    }
  },
  activated () {
    this.getCollectList()
    this.getPictureInfoById(this.$route.params.id)
  },
  deactivated () {
    this.isshow = true
  }
}
</script>

<style lang="less" scoped>
.img {
  width: auto;
  height: 260px;
  background-color: #f8f8f8;
  object-fit: cover;
}
@media screen and (min-width: 1280px) {
  .box{
    width: 70%;
    margin: auto;
    margin-top: 35px;
  }
}
</style>
